<template>
    <div id="">
        <!--订单页面-->
        <div class="name">
            <div @click="div1(0)" :class="this.div ==0?Classgreen:''">全部订单</div>
            <div @click="div1(1)" :class="this.div ==1?Classgreen:''">待支付</div>
            <div @click="div1(2)" :class="this.div ==2?Classgreen:''">交易成功</div>
        </div>
        <div class="names">
            <div :class="this.div ==0?Classblo:''">
                <div>
                    <div class="dindanhao">
                        <div></div><!--时间-->
                        <div>订单号：<span></span></div>
                    </div>
                    <div class="xaingq">
                        <div>子订单号：<span></span></div>
                        <div>
                            <div><img src="" alt=""></div>
                            <div class="xer">
                                <div></div>
                                <div></div>
                                <div></div><!--价格-->
                            </div>
                        </div>
                    </div>
                    <div class="shifu">
                        实付：<span>￥</span>
                    </div>
                    <div class="daizhifu">
                        <div class="shifu">
                            实付总计：<span>￥</span>
                        </div>
                        <div>
                            <div>待支付</div>
                            <div>
                                <button>取消订单</button>
                                <button class="chong"><router-link to="/pay">立即支付</router-link></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="this.div ==1?Classblo:''">
                <div>
                    <div class="dindanhao">
                        <div></div><!--时间-->
                        <div>订单号：<span></span></div>
                    </div>
                    <div class="xaingq">
                        <div>子订单号：<span></span></div>
                        <div>
                            <div><img src="" alt=""></div>
                            <div class="xer">
                                <div></div>
                                <div></div>
                                <div></div><!--价格-->
                            </div>
                        </div>
                    </div>
                    <div class="shifu">
                        实付：<span>￥</span>
                    </div>
                    <div class="daizhifu">
                        <div class="shifu">
                            实付总计：<span>￥</span>
                        </div>
                        <div>
                            <div>待支付</div>
                            <div>
                                <button>取消订单</button>
                                <button class="chong"><router-link to="/pay">立即支付</router-link></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div :class="this.div ==2?Classblo:''">
                <div>
                    <div class="dindanhao">
                        <div></div><!--时间-->
                        <div>订单号：<span></span></div>
                    </div>
                    <div class="xaingq">
                        <div>子订单号：<span></span></div>
                        <div>
                            <div><img src="" alt=""></div>
                            <div class="xer">
                                <div></div>
                                <div></div>
                                <div></div><!--价格-->
                            </div>
                        </div>
                    </div>
                    <div class="shifu">
                        实付：<span>￥</span>
                    </div>
                    <div class="daizhifu">
                        <div class="shifu">
                            实付总计：<span>￥</span>
                        </div>
                        <div>
                            <div>已支付</div>
                            <div>
                                <button>取消订单</button>
                                <button class="chong"><router-link to="/pay">立即支付</router-link></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		name: "",
        data() {
            return {
                list:[],
                div:0,
                Classgreen:"border",
                Classblo:"blo",
                user:{}
            }
        },
        created(){
            this.user = JSON.parse(sessionStorage.getItem("data"));
		    this.getdo();
        },
        methods: {
            //获取购物车列表  数据为空
            getdo:function(){
                let param = new URLSearchParams();//new Object();
                param.user_id=this.user.id;
                this.$ajax({
                    methods:'post',
                    url:'http://134.175.237.162/index.php/Shop_cart/getShopList',
                    data:param
                }).then((res) =>{
                    this.list = res.data;
                    console.log(res)
                }).catch(() => {
                    console.log('网络异常')
                })
            },
            div1:function (s) {
                this.div = s;
            }
        }
	}
</script>

<style scoped>
    .daizhifu{
        border-top: 1px solid #e6eaf2;
        background-color: white;
    }
    .daizhifu>div:last-child{
        padding: 0 10px 10px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }
    .daizhifu>div:last-child>div:first-child{line-height: 25px}
    .xaingq{
        padding: 10px 8px;
        font-size: 12px;
    }
    .xaingq>div:first-child{margin-bottom: 10px}
    .xaingq>div:last-child{display: flex;}
    .xaingq>div:last-child>div:nth-child(1){flex: 1}
    .xaingq>div:last-child>div:nth-child(1) img{width: 100%}
    .xaingq>div:last-child>div:nth-child(2){flex: 1}
    .xer{font-size: 14px}
    .shifu{
        padding: 10px;
        background-color: white;
        text-align: right;
        font-size: 12px}
    .dindanhao{
        padding: 10px;
        background-color: white;
        font-size: 12px;
        display: flex;
    }
    template > div {
        width: 100%
    }
    .name{
        padding: 0 10px;
        display: flex;
        text-align: center;
        background-color: white;
    }
    .name>div{
        font-size: 14px;
        flex: 1;
        padding: 8px;}
    .name>div.border{
        border-bottom: 2px solid #2CC17B;
        color:#2CC17B;
    }
    .names>div{
        display:none;
    }
    .names>div.blo{
        display:block;
    }
    button{
        font-size: 12px;
        vertical-align: middle;
        padding: 3px 6px;
    }
</style>
